<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动后的影响</title>
    <style>
        /*
        浮动后会有哪些影响:
        1.对兄弟元素的影响:
            后面未浮动的兄弟元素,会占据浮动元素的位置,在浮动元素下面,文字会被挤出
            对前面的兄弟元素没有影响

        2.对父元素的影响:
            不能撑起父元素的高度,导致父元素高度塌陷,但父元素高度依然束缚浮动元素
            父元素内所有元素都浮动的话,导致高度塌陷,父亲的兄弟元素会占据浮动位置

        */
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }

        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
            float: left;

        }

        .box1 {
            float: left;
        }

        .box2 {
            float: left;
        }

        .box3 {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="box">0</div>
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <!--    <div class="box box4">4</div>-->
</div>
<div style="background-color: orange">你撒娇殴打是 撒赖扩大啦什么的 扫街大数据打卡萨 扫街到实际到手就打死都
    骚的煎熬涉及到十九大啊实打实打算仨4545654564564564545465手动阀手动阀手动阀手动阀手动阀
    sdafasdfasdfasfasgsfdgsdfgsfdgs
</div>
</body>
</html>